<template>
  <div class="OctopusDashboard">
    <div class="waterfall">
        <div class="item classA">
            <div>
              <slot name="one_title"></slot>
              <div class="one_content">
                <slot ></slot>
              </div>
            </div>
        </div>
        <div class="item classA">
            <slot></slot>
        </div>
        <div class="item classB ">
          <p>3</p>
          <div class="two_box">
            <div class="two_system">
              <div class="two_system-top">
                <slot name="two_system-top_title"></slot>
              </div>
              <div class="two_system-bottom">
                <slot name="two_system-bottom_title"></slot>
              </div>
            </div>
          </div>
        </div>
        <div class="item classA">
          <div>
            <slot name="four_title"></slot>
            <div class="four_content">
              <slot ></slot>
            </div>
          </div>
        </div>
        <div class="item classA">
          <slot></slot>
        </div>
        <div class="item classC">
            <div class="six_box">
                <slot name="six_img"></slot>
              <div class="six_index">
                <slot name="reference_index"></slot>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'BarReportEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
        data() {
            return {}
        },
        methods:{

        }
    }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .waterfall_content>p{
    width 11%
    text-align center
    margin-right: 5px;
  }
  .waterfall_content>p:nth-child(-n+6){
    height 31px;
    background pink;
  }
</style>
